<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <title>上海蜗牛注册页面</title>
    <script th:src="@{/js/jquery-3.6.3.js}"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
              integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
              crossOrigin="anonymous">

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
            crossOrigin="anonymous"></script>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            width:100vw;
            height:100vh;
            position: relative;
            background:url(https://webimg.ziroom.com/2e7ce3a1-f5c1-4ba8-8ddb-bda67055a1f3.jpg) no-repeat fixed center/100% 100%;
        }
        .login{
            width:460px;
            height:500px;
            border:3px solid white;
            border-radius:15px;  /* 圆角 */
            position: absolute;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
            background-color: white;
            /* margin:auto; */
        }
        .h1{
            font-size: 32px;
            line-height: 40px;
            font-weight: bold;
            color: #fa9111;
            padding: 10px 0;
            text-align: left;
            margin-left:50px;
        }
    </style>
</head>
<body>

<div class="login">
    <h1 class="h1">租客注册</h1>
    <div class="container">
        <div class="row">
            <form method="post" action="/ziroom_portal/user/addUser" >

                <div class="form-group row">
                    <div class="col-sm-1"></div>
                    <label for="LoginName" class="col-sm-2 col-form-label">用户名</label>
                    <div class="col-sm-7">
                        <input type="text"  class="form-control " id="LoginName"  name="username" placeholder="请输入用户名">
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-1"></div>
                    <label for="name" class="col-sm-2 col-form-label">姓名</label>
                    <div class="col-sm-7">
                        <input type="text"  class="form-control " id="name"  name="name" placeholder="请输入真实姓名">
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-1"></div>
                    <label for="LoginPassword" class="col-sm-2 col-form-label">密码</label>
                    <div class="col-sm-7">
                        <input type="password"  class="form-control" id="LoginPassword"  name="password"
                               placeholder="请输入密码">
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-1"></div>
                    <label for="checkLoginPassword" class="col-sm-2 col-form-label" style="font-size: 12px">确认密码</label>
                    <div class="col-sm-7">
                        <input type="password"  class="form-control" id="checkLoginPassword"  name="LoginPassword"
                               placeholder="请确认密码">
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-sm-1"></div>
                    <label for="birth" class="col-sm-2 col-form-label">生日</label>
                    <div class="col-sm-7">
                        <input type="date"  class="form-control" id="birth"  name="birth"
                               placeholder="请选择生日">
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-sm-1"></div>
                    <label for="phone" class="col-sm-2 col-form-label">手机号</label>
                    <div class="col-sm-7">
                        <input type="text"  class="form-control" id="phone"  name="phone"
                               placeholder="输入手机号">
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-sm-1"></div>
                    <label for="verifyCode" class="col-sm-2 col-form-label">验证码</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="verifyCode" name="verifyCode" >
                    </div>
                    <div class="col-sm-4">
                        <button type="button" class="btn btn-success"   th:onclick="getVerifyCode()" >获取验证码</button>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-sm-3  "></div>
                    <div class="col-sm-5  ">
                        <button type="submit" class="btn btn-info">立即注册</button></div>
                </div>
            </form>
        </div>
    </div>
</div>

</body>

<script>

    function getVerifyCode() {
        //-- ajax 发请求 通知后台发送邮件
        let phone = $("#phone").val()
        $.post("/ziroom_portal/user/message",{"phone":phone},function (response) {
            alert(response);
        })
    }

</script>


</html>
